<template>
  <view class="ver-layout">
    <u-grid :col="4" :border="false">
      <u-grid-item v-for="(item,index) in gridList" :key="index" @click="navToPage(item)">
        <image class="grid-icon" :class="{'disabled':item.disabled}" :src="item.icon"></image>
        <view class="grid-text" :class="{'disabled':item.disabled}">{{ item.text }}</view>
      </u-grid-item>
    </u-grid>
    <view class="divider-line"></view>
    <!-- 统计数据   -->
    <view class="ver-layout student-manage-layout">
      <view class="student-manage-title hor-layout-side">
        <view class="title">学员统计</view>
        <view class="detail">详细数据</view>
      </view>
      <view class="hor-layout">
        <view class="manage-item ver-layout-center-all">
          <view class="num">{{ homeObj.student_total }}</view>
          <view class="title">学员总计</view>
        </view>
        <view class="manage-item ver-layout-center-all">
          <view class="num">{{ homeObj.section_total }}</view>
          <view class="title">总计课时</view>
        </view>
        <view class="manage-item no-border ver-layout-center-all">
          <view class="num">{{ homeObj.section_usenum }}</view>
          <view class="title">已消课时</view>
        </view>
      </view>
    </view>
    <!-- 代办事项   -->
    <view class="divider-line"></view>
    <view class="ver-layout todo-layout">
      <view class="hor-layout-side todo-title">
        <view>待办事项</view>
        <u-icon name="arrow-right" color="#333333" size="28" label="更多" label-pos="left"></u-icon>
      </view>
      <block v-if="homeObj.todo_list.length>0">
        <view v-for="(item,index) in homeObj.todo_list" :key="index" class="hor-layout todo-item">
          <u-tag :type="item.type==='班级'?'success':'warning'" :text="item.type" shape="circle" size="mini"/>
          <view style="margin-left: 5px" v-html="item.name"></view>
        </view>
      </block>
      <view v-else class="list-no-data" style="height: 100px;line-height: 100px">暂无数据</view>
    </view>
  </view>
</template>

<script>
import router from "@/router.js"
import {HomeApi} from "@/api/home"

let engine = new HomeApi()
let ic_home_enter_student = require("@/static/home/ic_home_enter_student.png")
    , ic_home_teacher_manage = require("@/static/home/ic_home_teacher_manage.png")
    , ic_home_student_manage = require("@/static/home/ic_home_student_manage.png")
    , ic_home_ask_break = require("@/static/home/ic_home_ask_break.png")
    , ic_home_course_manage = require("@/static/home/ic_home_course_manage.png")
    , ic_home_student_info = require("@/static/home/ic_home_student_info.png")
    , ic_home_course_live = require("@/static/home/ic_home_course_live.png")
    , ic_home_my_customer = require("@/static/home/ic_home_my_customer.png")
    , ic_home_suggest_recomd = require("@/static/home/ic_home_suggest_recomd.png")
    , ic_home_check_info = require("@/static/home/ic_home_work_info.png")
    , ic_home_todo = require("@/static/home/ic_home_todo.png")
    , ic_home_more = require("@/static/home/ic_home_more.png")
export default {
  name: "home",
  data() {
    return {
      gridList: [
        {text: '学员报名', icon: ic_home_enter_student, action: router.enterSd},
        {text: '教师管理', icon: ic_home_teacher_manage, action: router.teacher},
        {text: '学生管理', icon: ic_home_student_manage, action: router.recordStudy},
        {text: '请假审批', icon: ic_home_ask_break, action: router.askBreak},
        {text: '课程管理', icon: ic_home_course_manage, action: router.courseList},
        {text: '学籍管理', icon: ic_home_student_info, action: router.studyRecord},
        {text: '直播监课', icon: ic_home_course_live, action: router.courseLiveList},
        {text: '意向学员', icon: ic_home_my_customer, action: router.intentStudent},
        {text: '投诉建议', icon: ic_home_suggest_recomd, action: router.suggestBack},
        {text: '考勤中心', icon: ic_home_check_info, action: router.teacher},
        {text: '备忘录', icon: ic_home_todo, action: router.todoList},
        {text: '员工列表', icon: ic_home_student_manage, action: router.staffList},
        {text: '录播课程', icon: ic_home_course_manage, action: router.teacher},
        {text: '商品管理', icon: ic_home_suggest_recomd, action: router.goodsList},
        {text: '教师课表', icon: ic_home_suggest_recomd, action: router.teacher},
        {text: '更多', icon: ic_home_more, disabled: true},
      ],
      homeObj: {
        student_total: 0,
        section_total: 0,
        section_usenum: 0,
        todo_list: []
      }
    }
  },
  onLoad() {
    this.getHomeData()
  },
  onShow() {
    let pages = getCurrentPages();
    console.log("onShow", pages.map(pag => pag.route))
  },
  methods: {
    navToPage(item) {
      if (item.action)
        this.$u.route({url: item.action, params: item})
    },
    getHomeData() {
      engine.getHomeData().then(res => {
        this.homeObj = res.data
      }).catch(err => {
        if(err.message)this.$u.toast(err.message);
      })
    }
  }
}
</script>

<style scoped lang="scss">
.grid-icon {
  width: 48px;
  height: 48px;
}

.grid-icon.disabled {
  filter: grayscale(100%);
}

.grid-text {
  font-size: 28rpx;
  margin-top: 10rpx;
}

.grid-text.disabled {
  color: grey;
}

.divider-line {
  height: 24rpx;
  background: #F2F2F2;
}

.student-manage-layout {
  padding-top: 36rpx;
  padding-bottom: 48rpx;

  .student-manage-title {
    margin: 0px 24rpx;
    margin-bottom: 23rpx;

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }

    .detail {
      font-size: 28rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
    }
  }

  .manage-item {
    flex: 1;
    height: 123rpx;
    border-right: 1px solid #42B4AB;

    .num {
      font-size: 34rpx;
      color: #42B4AB;
    }

    .title {
      font-size: 28rpx;
      color: #333333;
      margin-top: 24rpx;
    }
  }

  .manage-item.no-border {
    border-right: none;
  }
}

.todo-layout {
  padding-top: 36rpx;

  .todo-title {
    margin: 0px 24rpx;
    margin-bottom: 23rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }

  .todo-item {
    margin: 0px 24rpx;
    margin-bottom: 36rpx;
  }
}
</style>
